<template>
  <div class="q-pa-md">
    <t-layout
      view="lHh Lpr lff"
      container
      style="height: 300px"
      class="shadow-2 rounded-borders"
    >
      <t-header elevated class="bg-cyan-8">
        <t-toolbar>
          <t-toolbar-title>Header</t-toolbar-title>
          <t-btn flat @click="drawer = !drawer" round dense icon="menu" />
        </t-toolbar>
      </t-header>

      <t-drawer v-model="drawer" show-if-above :width="200" :breakpoint="400">
        <t-scroll-area
          style="
            height: calc(100% - 150px);
            margin-top: 150px;
            border-right: 1px solid #ddd;
          "
        >
          <t-list padding>
            <t-item clickable v-ripple>
              <t-item-section avatar>
                <t-icon name="inbox" />
              </t-item-section>

              <t-item-section> Inbox </t-item-section>
            </t-item>

            <t-item active clickable v-ripple>
              <t-item-section avatar>
                <t-icon name="star" />
              </t-item-section>

              <t-item-section> Star </t-item-section>
            </t-item>

            <t-item clickable v-ripple>
              <t-item-section avatar>
                <t-icon name="send" />
              </t-item-section>

              <t-item-section> Send </t-item-section>
            </t-item>

            <t-item clickable v-ripple>
              <t-item-section avatar>
                <t-icon name="drafts" />
              </t-item-section>

              <t-item-section> Drafts </t-item-section>
            </t-item>
          </t-list>
        </t-scroll-area>

        <t-img
          class="absolute-top"
          src="https://cdn.quasar.dev/img/material.png"
          style="height: 150px"
        >
          <div class="absolute-bottom bg-transparent">
            <t-avatar size="56px" class="q-mb-sm">
              <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
            </t-avatar>
            <div class="text-weight-bold">Razvan Stoenescu</div>
            <div>@rstoenescu</div>
          </div>
        </t-img>
      </t-drawer>

      <t-page-container>
        <t-page padding>
          <p v-for="n in 15" :key="n">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil
            praesentium molestias a adipisci, dolore vitae odit, quidem
            consequatur optio voluptates asperiores pariatur eos numquam rerum
            delectus commodi perferendis voluptate?
          </p>
        </t-page>
      </t-page-container>
    </t-layout>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        drawer: ref(false),
      };
    },
  };
</script>
